<template>
  <div class="news">
    <div class="news-1">
      <a-list :data-source="listData" :pagination="pagination" item-layout="vertical" size="small">
        <template #footer>
          <div style="width: 80%; padding-left: 10px;">
            <b>希望您在职场中找到属于自己的位置，实现人生价值！</b>
            祝您工作顺利，生活美满，前程似锦！
          </div>
        </template>
        <template #renderItem="{ item }">

          <a-list-item key="item.title" class="list-item">
            <a-list-item-meta>
              <template #title>
                <div style="display: flex;justify-content: space-between">
                  <div style="margin-right: 20px">
                    <router-link
                        :to="{path:`/enterprise/enterpriseNews/detail/${item.offerId}/${item.offerJobId}/${item.offerEnterpriseId}`}">
                      查看消息详情
                    </router-link>
                  </div>
                  <div style="color: green">
                    OFFER-截止时间 : {{ formatInterviewDate(item.offerExpirationDate) }}
                  </div>
                  <div style="color: red;margin-left: 30px">
                    OFFER-状态 : {{ item.offerStatus }}
                  </div>
                  <!--              占位-->
                  <div style="width: 50%">
                  </div>
                  <div>
                    <a-popconfirm title="你确定删除这条记录吗，删除后不可恢复？"
                                  ok-text="确认"
                                  cancel-text="取消"
                                  @confirm="deleteOffer(item.offerId,item.offerEnterpriseId)">
                      <template #icon>
                        <question-circle-outlined style="color: red"/>
                      </template>
                      <a-button danger ghost type="primary">删除</a-button>
                    </a-popconfirm>
                  </div>
                  <br>
                </div>
                <div>
                  补充信息 : &nbsp;{{ item.offerSupplementaryInformation }}
                </div>
              </template>
            </a-list-item-meta>
          </a-list-item>
        </template>
      </a-list>
    </div>
  </div>
</template>
<script setup>
import {onMounted, ref} from "vue";
import {useUserStore} from "@/stores/user.js";
import {deleteOfferByEnterpriseAPI, pageOfferAPI} from "@/apis/offer.js";
import {queryInformationByUserIdAPI} from "@/apis/enterprise.js";
import {QuestionCircleOutlined} from "@ant-design/icons-vue";
import {message} from "ant-design-vue";


//获取数据
//获取数据
const useStore = useUserStore();
const enterpriseUserId = ref(useStore.userInfo.userId);
const listData = ref([]);
const data = ref({pageCurrent: 1, pageSize: 5, offerEnterpriseId: '', offerStatus: ''});
const getData = async (data) => {
  const res1 = await queryInformationByUserIdAPI(enterpriseUserId.value)
  data.offerEnterpriseId = res1.data.data.enterpriseId;
  const res = await pageOfferAPI(data)
  pagination.total = res.data.data.total
  listData.value = res.data.data.data
}

const pagination = {
  onChange: page => {
    console.log(page);
    data.value.pageCurrent = page
    getData(data.value)
  },
  pageSize: 5,
  total: 0,
};
// 生命周期
onMounted(() => {
  getData(data.value);
});
//删除
const deleteOffer = async (offerId,enterpriseId) => {
  const res = await deleteOfferByEnterpriseAPI(offerId,enterpriseId)
  if (res.data.flag){
    message.success('删除成功');
    await getData(data.value);
  }
}


const formatInterviewDate = (dateString) => {
  const date = new Date(dateString);

  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');

  return `${year}-${month}-${day} ${hours}:${minutes}`;
};

</script>
<style scoped>
.news {

  width: 100%;
  display: flex;
  justify-content: center;

  .news-1 {
    width: 90%;
    .list-item {
      margin: 10px 10px 0;
      padding-left: 20px;
      padding-right: 20px;
      padding-top: 20px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
      border-radius: 10px; /* 你可以调整这个值来改变圆角的大小 */
      width: 100%;

      h4 {
        background-color: #F5F5F5;
        padding: 9px;
        border-radius: 5px;
      }
    }
  }


}


</style>